<template>
        <div class="right-body">
            <div class="top-title">                            		
                <p>账号管理</p>
            </div>
            <div class="content">
                <!--账号信息部分-->
                <div class="step1">
                    <div class="user-info">
                        <img :src="$imgPath(detailObj.headImg)"/>
                        <div class="user-info-text">
                            <span>{{detailObj.nickname}}</span><span>UID:{{detailObj.code}}</span>
                        </div> 
                        <div class="myClear"></div>
                        <p>您当前的贡献值为：{{matisObj!=null&&matisObj.wealth>0?matisObj.wealth:'0'}}，魅力值为：{{matisObj!=null&&matisObj.popularity>0?matisObj.popularity:'0'}}</p>
                    </div>
                    <ul class="menuType">
                        <li>
                            <p>我的余额</p>
                            <p>￥{{walletObj.recharge!=null&&walletObj.recharge>0?walletObj.recharge:'0.00'}}</p>
                            <div class="step1-btn btn-1" @click="buyComponents(0)">充值</div>
                            <div class="step1-btn btn-2" @click="centerTx(9,0)">余额提现</div>
                        </li>
                        <li>
                            <p>我的钻石</p>
                            <p>{{walletObj.credits!=null&&walletObj.credits>0?walletObj.credits:'0'}}</p>
                            <div class="step1-btn btn-1" @click="buyComponents(1)">购买</div>       			
                        </li>
                        <li>
                            <p>可提收益</p>
                            <p>￥{{walletObj.income!=null&&walletObj.income>0?walletObj.income:'0.00'}}</p>
                            <div class="step1-btn btn-2" @click="centerTx(9,1)">收益提现</div>        				
                        </li>
                        <li>
                            <p>优惠券</p>
                            <p>{{couopsCount!=null&&couopsCount>0?couopsCount:'0'}}张</p>
                            <div class="step1-btn btn-2" @click="centerTx(3)">查看</div>        				
                        </li>
                        <div class="myClear"></div>
                    </ul>
                    <div class="myClear"></div>
                </div>
                <!--明细内容部分-->  
                <div class="step2">
                    <div class="step2-title">
                        <ul>
                            <li v-for="(val,index) in tabArr" :key="index" :class="[index==active ? 'active':'']" @click="active=index,typeActive=0">
                                <p>{{val}}</p>
                                <div class="after"></div>	        				
                            </li>                            
                        </ul>
                    </div>
                    <!--搜索导航条-->
                    <div class="step2-searchNav">
                        <div class="step2-searchNav-searchDiv">
                            <p>
								<DatePicker placeholder="开始时间" type="date" v-model="datePicker1" style="width: 120px;height:34px;"></DatePicker>
							</p>
                            <p>-</p>
                            <p>
								<DatePicker placeholder="结束时间" type="date" v-model="datePicker2" style="width: 120px;height:34px;"></DatePicker>
							</p>
                            <div class="search-btn" @click="typeActive=0,listType()">搜索</div>
                        </div>
                        <div class="step2-searchNav-TypeDiv">       				
                            <ul>
                                <li class="btn-bor" v-for="(val,index) in typeArr" :key="index" @click="typeActive=index,listType()" :class="[typeActive==index?'active2':'']">{{val}}</li>                               			
                            </ul>                            
                        </div>
                        <div class="myClear"></div>
                    </div>
                    <!--资金明细列表-->					
                    <div class="dataList" v-if="active==0">
						<p class="nullData" v-if="nullData1==true">资金明细暂无数据</p>
                        <table border="0" cellspacing="0" cellpadding="0" v-else>
                            <tr>
                                <td>资金类型</td>
                                <td>金额</td>
                                <!-- <td>账户余额</td> -->
                                <td>描述</td>
                                <td>创建日期</td>
                            </tr> 							                         
                            <tr v-for="(val,index) in cashList" :key="index">								
                                <td v-if="val.type==11">支出</td>
								<td v-if="val.type==22">支出</td>
								<td v-if="val.type==23">支出</td>
								<td v-if="val.type==20">支出</td>								
								<td v-if="val.type==31">收入</td>
								<td v-if="val.type==32">收入</td>
								<td v-if="val.type==40">收入</td>
								<td v-if="val.type==41">收入</td>
								<td v-if="val.type==51">收入</td>
								<td v-if="val.type==52">收入</td>
								<td v-if="val.type==53">收入</td>
								<td v-if="val.type==54">收入</td>
								<td v-if="val.type == 10">支出</td>
                                <td>{{val.amount}}</td> 	
                                <!-- <td>0.00</td>  -->                              
								<td v-if="describeTypes[index]==11">余额支出：充值钻石</td>
								<td v-if="describeTypes[index]==22">消费：购买礼物</td>
								<td v-if="describeTypes[index]==23">消费：服务下单</td>
								<td v-if="val.type == 10">消费：充值</td>
								<td v-if="describeTypes[index]==20">消费：其他</td>								
								<!-- <td v-if="describeTypes[index]==31">收益：{{val.goods[0].obj.level + val.goods[0].count}}小时</td> -->
								<td v-if="describeTypes[index]==31">收益：服务接单</td>
								<td v-if="describeTypes[index]==32">收益：礼物收入</td>
								<td v-if="describeTypes[index]==40">提现：收益提现</td>
								<td v-if="describeTypes[index]==41">提现：余额提现</td>
								<td v-if="describeTypes[index]==51">退款：订单退款</td>
								<td v-if="describeTypes[index]==52">退款：微信退款</td>
								<td v-if="describeTypes[index]==53">退款：支付宝退款</td>
								<td v-if="describeTypes[index]==54">退款：投诉退款</td>
                                <td>{{$time3(val.createTime)}}</td> 
                            </tr>                                                      
                        </table>						
                    </div>
					<!--钻石明细列表-->					
					<div class="dataList" v-if="active==1">
						<p class="nullData" v-if="nullData2==true">钻石明细暂无数据</p>
						<table border="0" cellspacing="0" cellpadding="0" v-else>
                            <tr>
                                <td>钻石类型</td>
                                <td>钻石</td>
                               <!--  <td>账户钻石</td> -->
                                <td>描述</td>
                                <td>创建日期</td>
                            </tr>
                            <tr v-for="(val,index) in diamondList" :key="index">
                                <td v-if="val.type==21">支出</td>
								<td v-if="val.type==11">收入</td>
                                <td>{{val.amount}}</td> 
                                <!-- <td>20</td>  -->                               
								<td v-if="describeTypes2[index]==11">充值钻石</td>
								<td v-if="describeTypes2[index]==21">赠送礼物</td> 
                                <td>{{$time3(val.createTime)}}</td> 
                            </tr>                                                     
                        </table>
					</div>
					<!-- 分页 -->
					<div class="page-layout">
						<Page :total="total" show-elevator  @on-change="change" />
					</div>				
                </div>
            </div>			
        </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
	props:['detailObj'],
    data(){
        return{			
			active:0,
			typeActive:0,
			tabArr:["资金明细","钻石明细"],
			typeArr:["全部","收入","支出"], 	//明细类型菜单
			matisObj:{},   //榜单查询对象
			walletObj:{},	//钱包详情对象
			couopsCount:0,	//用户领用优惠卷数量
			page:0,
			size:10,
			type:0,	//明细类型
			total:0,
			cashList:[],	//资金明细列表
			diamondList:[],	//钻石明细列表
			nullData1:false,
			nullData2:false,
			datePicker1:'',
			datePicker2:'',
			startDate:'',	//筛选的起始时间
			endDate:'',		//筛选的终止时间
			describeTypes:[],	//资金明细描述类型数组
			describeTypes2:[]	//钻石明细描述类型数组		
        }
	},
	created(){
		this.getMatis();
		this.getMyWallet();
		this.getMyCouopsCount();
		this.getUserCash();
		this.getUserDiamonList();
	},
	methods:{
		//获取贡献值和魅力值
		getMatis(){
			apiHttp.apiCenter.getUserCredit('',resp=>{				
				if(resp.code==200){
					this.matisObj = resp.data;
				}				
			})
		},
		//获取钱包详情
		getMyWallet(){
			apiHttp.apiCenter.getUserWalletDetail('',resp=>{
				if(resp.code==200){
					this.walletObj = resp.data;
				}
			})
		},
		//查询用户领用优惠卷数量
		getMyCouopsCount(){
			apiHttp.apiCenter.getMyCouponsCount('',resp=>{
				if(resp.code==200){
					this.couopsCount = resp.data;
				}
			})
		},
		//获取资金明细列表
		getUserCash(){
			let params={
                    page:this.page,
                    size:this.size,
					type:this.type,
					startDate:this.startDate,
					endDate:this.endDate
                }
			apiHttp.apiCenter.cash(params,resp=>{		
				if(resp.code==200){
					this.cashList = resp.data.content;
					this.total = resp.data.totalElements;
					for(var i =0;i<this.cashList.length;i++){
						if(this.cashList[i].type==11){
							this.describeTypes.push(11);
						}else if(this.cashList[i].type==10){
							this.describeTypes.push(10);						
						}else if(this.cashList[i].type==22){
							this.describeTypes.push(22);
						}else if(this.cashList[i].type==23){
							this.describeTypes.push(23);
						}else if(this.cashList[i].type==20){
							this.describeTypes.push(20);
						}else if(this.cashList[i].type==31){
							this.describeTypes.push(31);
						}else if(this.cashList[i].type==32){
							this.describeTypes.push(32);
						}else if(this.cashList[i].type==40){
							this.describeTypes.push(40);
						}else if(this.cashList[i].type==41){
							this.describeTypes.push(41);
						}else if(this.cashList[i].type==51){
							this.describeTypes.push(51);
						}else if(this.cashList[i].type==52){
							this.describeTypes.push(52);
						}else if(this.cashList[i].type==53){
							this.describeTypes.push(53);
						}else if(this.cashList[i].type==54){
							this.describeTypes.push(54);					
						}
						
					}				
					if(this.cashList.length==0){
						this.nullData1 = true;
					}else{
						this.nullData1 = false;
					}					
				}
			})
		},
		//获取钻石明细列表
		getUserDiamonList(){						
			let params={
                    page:this.page,
                    size:this.size,
					type:this.type,					
					startDate:this.startDate,
					endDate:this.endDate
                }
			apiHttp.apiCenter.getUserDiamondlog(params,resp=>{				
				if(resp.code==200){
					this.diamondList = resp.data.content;
					this.total = resp.data.totalElements;
					for(var i =0;i<this.diamondList.length;i++){
						if(this.diamondList[i].type==11){
							this.describeTypes2.push(11);
						}else if(this.diamondList[i].type==21){
							this.describeTypes2.push(21);
						}						
					}							
					if(this.diamondList.length==0){
						this.nullData2 = true;
					}else{
						this.nullData2 = false;
					}					
				}
			})
		},
		// 分页
        change(index){
            this.page = index - 1
            if(this.active == 0){
                this.getUserCash();
            }else if(this.active == 1){
                this.getUserDiamonList();
            }
		},
		//数据筛选
		listType(){			
			if(this.datePicker1!=''){
				this.startDate = this.$time(this.datePicker1);
			}
			if(this.datePicker2!=''){
				this.endDate = this.$time(this.datePicker2);
			}												
			if(this.active==0){
				if(this.typeActive==0){
					this.type=0;
				}else if(this.typeActive==1){
					this.type=3;
					
				}else if(this.typeActive==2){
					this.type=2;				
				}				
				this.getUserCash();
			}else if(this.active==1){
				if(this.typeActive==0){
					this.type=0;
				}else if(this.typeActive==1){
					this.type=11;
					
				}else if(this.typeActive==2){
					this.type=21;				
				}	
				this.getUserDiamonList();
			}
			
		},
		//跳转到余额提现页面,查看优惠券-跳转到我的优惠券页面
		centerTx(type,index){											
			this.$emit("lindex",{type:type,index:index})
		},
		//跳转到充值和购买页面
		buyComponents(type){
			let tabIndex = 0;
			if(type==1){
				tabIndex = 1
			}
			this.$router.push({
				name:'topUp',
				query:{tabIndex:tabIndex}				
			})
		}
						
	}

}
</script>

<style scoped>
.myClear{
	clear: both;
}
.top-title{
	width: 100%;
	padding: 60px 0px 20px 10px;
	font-size: 20px;
	color: #666666;
	border-bottom: 1px solid #eeeeee;
}
.content .step1{
	padding-top: 30px;
	padding-left: 60px;
}
/*账号信息部分*/
.step1 .user-info{
	float: left;
}
.step1 .user-info>img{
	float: left;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin-right: 30px;
}
.user-info .user-info-text{
	float: left;
	margin-top: 50px;
}
.user-info-text>span:nth-child(1){
	margin-right: 20px;
	font-size: 22px;
	color: #333333;
}
.user-info-text>span:nth-child(2){
	font-size: 18px;
	color: #333333;
}
.step1 .user-info>p{		
	font-size: 16px;
	color: #999999;
	padding-left: 50px;
	margin-top: 20px;
}
.step1 .menuType{
	float: left;
	margin-left: 150px;
	margin-top: 30px;		
}
.step1 .menuType>li{
	float: left;				
	padding: 0px 60px;
	border-right: 1px solid #EEEEEE;
	text-align: center;		
}
.step1 .menuType>li>p:nth-child(1){		
	font-size: 14px;
	color: #999999;
	margin-bottom: 10px;	
}
.step1 .menuType>li>p:nth-child(2){		
	font-size: 18px;
	color: #333333;
	margin-bottom: 50px;	
}
.step1 .menuType>li .step1-btn {
	width: 88px;
	height: 28px;
	font-size: 14px;		
	border-radius: 14px;
	text-align: center;
	line-height: 28px;
}
.step1 .menuType>li .btn-1 {
	color: #FFFFFF;		
	background-color: #D84E4D;
	margin-bottom: 20px;		
}
.step1 .menuType>li .btn-2 {
	color: #D84E4D;		
	border: 1px solid #D84E4D;		
}
/*明细内容部分*/
.step2{
	margin-top: 80px;
}
.step2 .step2-title{
	padding-left: 30px;
	border-bottom: 5px solid #eeeeee;
}	
.step2 .step2-title>ul>li{
	display: inline-block;
	font-size: 20px;
	color: #666666;
	width: 140px;
	height: 65px;
	text-align: center;
	line-height: 55px;
	position: relative;		
}
.step2 .step2-title ul li.active{
	color: #d84e4d;		
}
.step2 .step2-title ul li .after{
	border-bottom: 5px solid #d84e4d;
	width: 120px;
	height: 5px;
	position: absolute;
	bottom: -5px;
	right: 20px;
	z-index: 9;
	display: none;
}
.step2 .step2-title ul li:first-child .after{
	width: 140px;
	right: 0;
}
.step2 .step2-title ul li.active .after{
	display: block;
}
.step2-searchNav{
	padding: 30px 120px;
}
.step2-searchNav .step2-searchNav-searchDiv{
	float: left;
	display: flex;
	flex-direction: row;
}
::-webkit-input-placeholder{
	color:red;
	font-size:14px;
}
.step2-searchNav-searchDiv>p:nth-child(2){
	font-size: 18px;
}
.step2-searchNav-searchDiv>p:nth-child(1),.step2-searchNav-searchDiv>p:nth-child(3){
	width: 120px;
	height: 34px;
	border-radius:4px;
	/* text-align: center;
	line-height: 24px; */
	margin: 0px 10px;		
}
.step2-searchNav-searchDiv .search-btn{
	width: 88px;
	height: 28px;
	font-size: 14px;		
	border-radius: 14px;
	text-align: center;
	line-height: 28px;
	color: #FFFFFF;		
	background-color: #D84E4D;
	margin-left: 10px;
}
.step2-searchNav .step2-searchNav-TypeDiv{
	float: left;
	display: flex;
	flex-direction: row;
	margin-left: 60px;
}
.step2-searchNav .step2-searchNav-TypeDiv>ul{		
	display: flex;
	flex-direction: row;
	margin-left: 60px;
}
.step2-searchNav-TypeDiv>ul>li{
	width: 88px;
	height: 28px;
	font-size: 14px;		
	border-radius: 14px;
	text-align: center;
	line-height: 28px;
	margin-right: 20px;
}
.step2-searchNav-TypeDiv .btn-bor{
	color: #D84E4D;		
	border: 1px solid #D84E4D;
}
/*明细列表*/
.step2 .dataList{
	width: 100%;
	padding: 0px 30px 20px 30px;
}
.dataList table{
	width: 90%;
	border: none;
	text-align: center;
	font-size: 14px;
	color: #666666;
}
.dataList table tr{
	height: 60px;
	border-bottom: 1px solid #eeeeee;
}
.dataList table tr:nth-child(1){
	background-color: #F4F4F4;
	font-size: 12px;
	color: #999999;
	height: 50px;
}
.step2-searchNav-TypeDiv .active2{
	color: #FFFFFF;		
	background-color: #D84E4D;
}
</style>

